<template>
    <div class="detail">
      <hm-header title="面经详情" :showLeft="true" @clickLeft="fnLeft">
        <template #default>
          <div>面经详情</div>
        </template>
        <template #right>
  
        </template>
      </hm-header>
  
  
       <h1>{{ obj.stem }}</h1>
      <div class="info">
        <span>{{ obj.createdAt }}</span>
        <span>|</span>
        <span>{{ obj.views }} 浏览量</span>
        <span>|</span>
        <span>{{ obj.likeCount }} 点赞数</span>
      </div>
  
      <div class="qian">
        <img :src="obj.creatorAvatar" alt="" />
        <span>{{ obj.creatorName }}</span>
      </div>
  
      <div class="content">
        {{ obj.content }}
      </div>
    </div>
  </template>
  
  <script>
  import HmHeader from '@/components/HmHeader.vue';
  import axios from 'axios';
  export default {
      components: {HmHeader},
      name: 'HmDetail',
      data() {
        return {
          obj: {}
        }
      },
      mounted() {
        // 获取id
          console.log(this.$route.query.id)
        // 发请求获取数据
        axios({
          url: 'https://mock.boxuegu.com/mock/3083/articles/:id',
          params: {id: this.$route.query.id},
          method: 'get'
        }).then(res => {
            console.log(res.data.result)
            this.obj = res.data.result
        })
      },
      methods: {
          fnLeft() {
              this.$router.back()
          }
      }
  }
  </script>
  
  <style lang="less" scoped>
  .qian {
    display: flex;
    align-items: center;
  
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  
  .content {
    text-indent: 2em;
  }
  </style>